<br>
<form action="#" id="user-search-form" class="layui-form">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label>ID:</label>
            <div class="layui-inline">
                <input type="text" name="id" autocomplete="off" placeholder="请输入ID" class="layui-input">
            </div>
            <label>状态:</label>
            <div class="layui-inline">
                <select name="status">
                    <option value="">请选择</option>
                    <option value="0">无效</option>
                    <option value="1">有效</option>
                </select>
            </div>
            <div class="layui-inline">
                <button class="layui-btn" lay-submit lay-filter="search-admin">搜索</button>
            </div>
        </div>
    </div>
</form>

<table id="user-table" lay-filter="user-table"></table>

<script>
    layui.use(function(){
        // 第一部分，声明部分
        var table = layui.table;
        var layer = layui.layer;
        var laydate = layui.laydate;
        var form = layui.form;
        var $ = layui.$;
        form.render();
        //数据表格核心函数
        table.render({
            elem: '#user-table'
            ,url: '/user/findAll' //数据接口
            ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem）- 详见文档
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                //,curr: 5 //设定初始在第 5 页
                ,groups: 3 //只显示 1 个连续页码R
                ,first: false //不显示首页
                ,last: false //不显示尾页
            }
            ,toolbar: '#user-toolbar' //开启头部工具栏，并为其绑定左侧模板
            ,cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                ,{field: 'id', title: 'ID', width:80, sort: true}
                ,{field: 'email', title: '邮箱'}
                ,{field: 'status', title: '状态', sort: true , templet:function (d) {
                       return  d.status == 0 ? '<span class="layui-badge layui-bg-red">无效</span>' : '<span class="layui-badge layui-bg-green">有效</span>';
                    }   }
                ,{field: 'password', title: '密码'}
                ,{field: 'realName', title: '真实名称'}
                ,{field: 'auth', title: '权限'}
                ,{fixed: 'right', title:'操作', toolbar: '#user-body-bar', width:150}
            ]]
            ,limit:2
            ,limits:[2,4,6,8,10,12,14]
        });

        //头工具栏事件
        table.on('toolbar(user-table)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id); // 检查当前的数据表格选中了哪些数据行
            switch(obj.event){
                case 'addUser':
                    openEditWindow(null);
                    break;
                case 'deleteUser':
                    // var data = checkStatus.data;
                    // layer.msg('选中了：'+ data.length + ' 个');
                    var data = table.checkStatus('user-table').data;
                    if (data.length > 0) {
                        layer.confirm('真的删除行么', function (index) {
                            var param = ""
                            $.each(data, function (i, obj) {
                                param += "&ids=" + obj.id
                            })
                            $.ajax({
                                url: "/user/del",
                                data: param,
                                method: 'post',
                                success: function (result) {
                                    if (result.status) {
                                        table.reload('user-table', {});
                                    } else {
                                        alert(result.message)
                                    }
                                    layer.close(index);
                                }
                            })
                        });
                    }
                    break;
                // case 'isAll':
                //     layer.msg(checkStatus.isAll ? '全选': '未全选');
                //     break;

                //自定义头工具栏右侧图标 - 提示
                // case 'LAYTABLE_TIPS':
                //     layer.alert('这是工具栏右侧自定义的一个图标按钮');
                //     break;
            };
        });

        function openEditWindow(data) {
            layer.open({
                type: 1,
                content: data == null ? $('#user-add-layer').html():$('#user-edit-layer').html(),
                title: '编辑'
                , area: ['500px', '400px'],
                btn: ['提交', '取消'] //可以无限个按钮
                , yes: function (index, layero) {
                    layer.load();
                    console.log($("#user-add-form").serialize());
                    $.ajax({
                        url: "/user/" + (data == null ? 'add' : 'update'),
                        //  url: '/sys/customer/update',
                        data: data == null ?$("#user-add-form").serialize():$("#user-edit-form").serialize(),
                        method: 'post',
                        success: function (result) {
                            if (result.status) {
                                table.reload('user-table', {});
                                layer.close(index);
                            } else {
                                layer.alert(result.message)
                            }
                            layer.closeAll('loading');
                        }
                    });
                }, success: function (layero, index) {
                    form.render();
                    // 为编辑模式填充数据
                    if (data != null) {
                        form.val("user-edit-form", data);
                    }
                }
            });

        }

        //监听行工具事件
        table.on('tool(user-table)', function(obj){
            var data = obj.data;
            //console.log(obj)
            if(obj.event === 'edit'){
                openEditWindow(data);
            }
        });

        // 给搜索表单注册单击事件
        form.on('submit(search-admin)', function (data) {
            table.reload('user-table', {
                page: {
                    curr: 1 //重新从第 1 页开始
                },
                where: data.field
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

    });
</script>


<script type="text/html" id="user-toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="addUser">增加</button>
        <button class="layui-btn layui-btn-sm" lay-event="deleteUser">删除</button>
    </div>
</script>

<!-- 增加-->
<script type="text/html" id="user-add-layer">
    <form id="user-add-form" style="width: 80%" class="layui-form" lay-filter="user-add-form">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="email" required lay-verify="required" placeholder="请输入用户名"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="radio" name="status" value="1" title="有效" checked="">
                <input type="radio" name="status" value="0" title="无效">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">真实名称</label>
            <div class="layui-input-block">
                <input type="text" name="realName" required lay-verify="required" placeholder="请输入真实名称"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">权限</label>
            <div class="layui-input-block">
                <input type="text" name="auth" required lay-verify="required" placeholder="请输入权限"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
    </form>
</script>

<!-- 修改-->
<script type="text/html" id="user-edit-layer">
    <form id="user-edit-form" style="width: 80%" class="layui-form" lay-filter="user-edit-form">
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="email" required lay-verify="required" placeholder="请输入用户名"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="radio" name="status" value="1" title="有效" checked="">
                <input type="radio" name="status" value="0" title="无效">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">真实名称</label>
            <div class="layui-input-block">
                <input type="text" name="realName" required lay-verify="required" placeholder="请输入真实名称"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">权限</label>
            <div class="layui-input-block">
                <input type="text" name="auth" required lay-verify="required" placeholder="请输入权限"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
    </form>
</script>


<script type="text/html" id="user-body-bar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
</script>
